// .am-stepper-handler-active,
// .am-stepper-handler-up-inner:active,
// .am-stepper-handler-down-inner:active {
//   background-color: @color-bg-level-3;
// }

.am-stepper-handler-up-inner {
  background-color: @color-bg-level-3;
}

.am-stepper .am-stepper-handler .am-stepper-handler-up-inner:before {
  color: @color-font;
}
.am-stepper .am-stepper-handler .am-stepper-handler-down-inner:before {
  color: @color-font-level-1;
}

.am-stepper {
  overflow: initial;
  box-sizing: border-box;
  .am-stepper-input-wrap {
    border: 2px solid @color-border;
    border-radius: 8px;
    background-color: @color-bg-level-2;
    box-sizing: border-box;
    .am-stepper-input {
      vertical-align: baseline;
      border-left: 2px solid @color-border;
      border-right: 2px solid @color-border;
      height: 100%;
      width: 40%;
      color: @color-font-level-1;
      font-size: 30px;
    }
  }
  .am-stepper-handler {
    border: none;
    &.am-stepper-handler-down {
      border-right: none;
    }
    .am-stepper-handler-up-inner:before,
    .am-stepper-handler-down-inner:before {
      // color: @color-font-level-1;
    }
  }
}

.am-stepper.showNumber {
  width: 87%;
  .am-stepper-input-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .am-stepper-handler-down {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .am-stepper-handler-up {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.am-stepper-handler-up {
  right: -1px;
}

.am-stepper-handler-up {
  width: 30%;
}
.am-stepper-handler-down {
  width: 30%;
}

.am-stepper-handler-up-inner,
.am-stepper-handler-down-inner {
  width: 100%;
}

.am-picker-popup {
  .am-picker-popup-body {
    background-color: @color-background;
    .am-picker-popup-header {
      background-color: @color-bg-level-2;
      &::after {
        border-bottom-color: @color-background;
        z-index: 2;
      }
      .am-picker-popup-header-cancel-button {
        color: @color-font-level-1;
        &:active {
          background-color: @color-bg-level-2;
        }
      }
      .am-picker-popup-header-ok-button {
        color: @color-yellow;
        &:active {
          background-color: @color-bg-level-2;
        }
      }
    }
    .am-picker {
      .am-picker-col-mask {
        background-image: linear-gradient(to bottom, rgba(22, 27, 33, 0.95), rgba(22, 27, 33, 0.6)), linear-gradient(to top, rgba(22, 27, 33, 0.95), rgba(22, 27, 33, 0.6));
      }
      .am-picker-col-indicator {
        border-top:  2px solid @color-border;
        border-bottom:  2px solid @color-border;
        color: #fff;
        box-sizing: border-box;
      }
      .am-picker-col-item {
        color: @color-font-level-1;
        font-size: 32px;
      }
      .am-picker-col-item-selected {
        color: @color-font;
        font-size: 36px;
      }
    }
  }
}